import React, { useEffect, useState } from 'react';
import {Card, Descriptions,Button} from 'antd';
import PageHeader from '../../components/PageHeader';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import dayjs from 'dayjs';
import{HeartOutlined} from '@ant-design/icons';

const  Detail = () => {
  const [newsData, setNewsData] = useState({});
  const { id } = useParams();
 useEffect(()=>{
    const  getNews=async() => {
      await axios.get(`http://localhost:3000/news/${id}?_expand=category&_expand=role`).then(res=>{
        setNewsData(res.data)
        // 使用从API获取的数据来更新访问次数，而不是使用newsData状态
        const updatedViewCount = (res.data.view || 0) + 1;
        axios.patch(`http://localhost:3000/news/${id}`, {view: updatedViewCount});
      })
    }
    getNews()
  },[id])  // 添加 id 作为依赖项
  
  const handleBack = () => {
    window.history.back()
  };
  console.log(newsData);
  const handleLike = async () => {
    // 计算新的点赞数
    const newStarCount = (newsData.star || 0) + 1;
    
    // 更新服务器上的点赞数
    try {
      await axios.patch(`http://localhost:3000/news/${id}`, {star: newStarCount});
      
      // 更新本地状态
      setNewsData(prevData => ({
        ...prevData,
        star: newStarCount
      }));
      
    } catch (error) {
      console.error("点赞失败:", error);
    }
  };
  return (
   <div>
    {
      // 用来解决数据请求延迟导致数据为空
      newsData&& 
      <div style={{ padding: '20px', background: '#f5f5f5', minHeight: '100vh' }}>
        <Card>
           <PageHeader
              onBack={handleBack}
              title={newsData.title}
              extra={
                <Button icon={<HeartOutlined />}  onClick={handleLike} ></Button>
              }
          />

            <div style={{ padding: '0 24px' }}>
              <Descriptions bordered column={3} style={{ marginBottom: '24px' }}>
                <Descriptions.Item label="分类">
                  {newsData.category?.title || '未分类'}
                </Descriptions.Item>
                <Descriptions.Item label="作者">
                  {newsData.author}
                </Descriptions.Item>
                <Descriptions.Item label="区域">
                  {newsData.region}
                </Descriptions.Item>
                <Descriptions.Item label="发布时间">
                  {
                  newsData.publishTime? dayjs(newsData.publishTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                  }
                </Descriptions.Item>
                <Descriptions.Item label="访问数量">
                  {newsData.view || 0}
                </Descriptions.Item>
                <Descriptions.Item label="点赞数量">
                  {newsData.star || 0}
                </Descriptions.Item>
                <Descriptions.Item label="评论数量">
                  0
                </Descriptions.Item>
              </Descriptions>

              <Card title="新闻内容" style={{ marginTop: '24px' }}>
                <div 
                  style={{ 
                    minHeight: '300px',
                    lineHeight: '1.6',
                    fontSize: '16px'
                  }}
                  dangerouslySetInnerHTML={{ __html: newsData.content }}
                />
              </Card>
            </div>
        </Card>
      </div>
    }
   </div>
  );
};

export default Detail
